<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script src="../dist/zrender.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:600px;"></div>
    <script type="text/javascript">

        // 初始化zrender
        var zr = zrender.init(document.getElementById('main'));

        var points = [[118.6963,28.3118],[118.6963,28.3228],[118.7292,28.3392],[118.7402,28.3612],[118.7402,28.3722],[118.7622,28.4052],[118.7512,28.4161],[118.7183,28.4106],[118.7292,28.4491],[118.7292,28.4985],[118.7512,28.526],[118.7732,28.515],[118.7842,28.526],[118.8171,28.548],[118.8501,28.5425],[118.8611,28.5205],[118.8831,28.526],[118.916,28.5645],[118.905,28.5754],[118.905,28.5919],[118.927,28.6414],[118.949,28.6469],[118.96,28.6414],[119.0039,28.6963],[119.0369,28.7128],[119.0588,28.7347],[119.0808,28.7402],[119.0918,28.7347],[119.1028,28.7402],[119.1357,28.7347],[119.1687,28.7457],[119.1907,28.7677],[119.2456,28.7622],[119.2676,28.7842],[119.2786,28.8062],[119.3005,28.8062],[119.3115,28.8116],[119.3225,28.8007],[119.3335,28.8007],[119.3225,28.7787],[119.3335,28.7622],[119.3445,28.7567],[119.3774,28.7842],[119.3884,28.7842],[119.4214,28.7512],[119.4653,28.7622],[119.4763,28.7457],[119.4653,28.7402],[119.4653,28.7073],[119.4543,28.6469],[119.4653,28.6359],[119.4873,28.6359],[119.4873,28.6249],[119.5093,28.6139],[119.4983,28.5809],[119.4983,28.5535],[119.5093,28.559],[119.5313,28.559],[119.5422,28.5315],[119.5642,28.5315],[119.5752,28.5205],[119.6301,28.526],[119.6411,28.5425],[119.6631,28.5425],[119.6741,28.5315],[119.707,28.5315],[119.718,28.5645],[119.74,28.5809],[119.74,28.5919],[119.762,28.5864],[119.7729,28.6029],[119.751,28.6249],[119.751,28.6359],[119.762,28.6414],[119.7839,28.6304],[119.8059,28.6523],[119.8169,28.6853],[119.8499,28.7128],[119.8718,28.7183],[119.8718,28.7402],[119.8938,28.7512],[119.9158,28.7842],[119.9158,28.7952],[119.9597,28.7842],[119.9817,28.7952],[120.0366,28.7567],[120.0916,28.7897],[120.0916,28.7732],[120.1245,28.7622],[120.1355,28.7677],[120.1465,28.7842],[120.1685,28.7732],[120.1794,28.7842],[120.2014,28.7842],[120.2124,28.7952],[120.2014,28.8062],[120.2014,28.8116],[120.2454,28.8611],[120.2563,28.8666],[120.2673,28.8995],[120.2563,28.9325],[120.2673,28.949],[120.2893,28.9325],[120.3113,28.938],[120.3003,28.927],[120.3113,28.8885],[120.3223,28.8721],[120.3442,28.8556],[120.3552,28.8391],[120.3882,28.8281],[120.3992,28.8556],[120.4102,28.8501],[120.4211,28.8501],[120.4211,28.8336],[120.4211,28.8281],[120.4102,28.7897],[120.3882,28.7842],[120.3662,28.7622],[120.3772,28.7457],[120.3552,28.7292],[120.3552,28.7073],[120.3223,28.6963],[120.3223,28.6688],[120.3333,28.6633],[120.3223,28.6578],[120.3552,28.6414],[120.3662,28.6249],[120.3662,28.6029],[120.3772,28.5974],[120.3772,28.5809],[120.3662,28.5699],[120.3662,28.5809],[120.3333,28.5754],[120.3223,28.5535],[120.3113,28.5535],[120.2893,28.5315],[120.3003,28.5095],[120.3333,28.4985],[120.3772,28.4985],[120.3882,28.4711],[120.3772,28.4546],[120.3772,28.4491],[120.3772,28.4271],[120.3772,28.4161],[120.3442,28.4326],[120.3442,28.4106],[120.3333,28.4052],[120.3442,28.3832],[120.3442,28.3722],[120.3552,28.3722],[120.3662,28.3557],[120.3552,28.3337],[120.4102,28.3008],[120.4211,28.2733],[120.4211,28.2513],[120.4431,28.2404],[120.4321,28.2294],[120.4211,28.2074],[120.4321,28.1854],[120.4211,28.1689],[120.4211,28.1525],[120.3882,28.147],[120.3992,28.1305],[120.4102,28.114],[120.3662,28.0811],[120.3772,28.0591],[120.3442,28.0481],[120.3442,28.0261],[120.3333,27.9932],[120.3552,27.9822],[120.3333,27.9657],[120.3223,27.9767],[120.2893,27.9767],[120.2673,27.9547],[120.2454,27.9602],[120.2454,27.9327],[120.2014,27.9382],[120.1685,27.9602],[120.1794,27.9712],[120.1135,27.9877],[120.1025,27.9822],[120.1135,27.9657],[120.0696,27.9657],[120.0696,27.9602],[120.0696,27.9437],[120.0366,27.9492],[120.0256,27.9382],[119.9597,27.9382],[119.9707,27.9712],[119.9597,27.9767],[119.9158,27.9657],[119.9158,27.9492],[119.8938,27.9547],[119.8718,27.9712],[119.8718,27.9657],[119.8718,27.9492],[119.8279,27.9602],[119.8389,27.9327],[119.8389,27.9108],[119.8059,27.9218],[119.7839,27.9108],[119.7949,27.8888],[119.7839,27.8613],[119.7839,27.8119],[119.7839,27.7954],[119.7729,27.7954],[119.7729,27.8064],[119.751,27.7954],[119.74,27.7734],[119.74,27.7515],[119.729,27.746],[119.696,27.757],[119.6851,27.746],[119.6741,27.7295],[119.6521,27.7185],[119.6521,27.691],[119.6301,27.6691],[119.6082,27.6746],[119.5972,27.6636],[119.5752,27.6691],[119.5642,27.6581],[119.5532,27.6691],[119.5203,27.6581],[119.5203,27.6526],[119.4983,27.6581],[119.4983,27.6361],[119.4983,27.6141],[119.4873,27.5977],[119.4653,27.5262],[119.4324,27.5098],[119.4214,27.5317],[119.3774,27.5372],[119.3445,27.5153],[119.3445,27.5098],[119.3445,27.4933],[119.3335,27.4768],[119.2786,27.4548],[119.2786,27.4329],[119.2456,27.4164],[119.1907,27.4219],[119.1797,27.4274],[119.1467,27.4274],[119.1248,27.4384],[119.1357,27.4658],[119.1248,27.4823],[119.0808,27.4658],[119.0808,27.4713],[119.0698,27.4658],[119.0479,27.4768],[119.0149,27.4933],[118.9929,27.4933],[118.9819,27.4768],[118.96,27.4768],[118.96,27.4603],[118.96,27.4493],[118.938,27.4658],[118.905,27.4603],[118.894,27.4768],[118.8831,27.4823],[118.8831,27.5043],[118.8721,27.5153],[118.8611,27.5153],[118.8611,27.5208],[118.8831,27.5317],[118.894,27.5317],[118.916,27.5757],[118.905,27.5922],[118.916,27.6141],[118.905,27.6251],[118.905,27.6416],[118.8721,27.6855],[118.8721,27.702],[118.894,27.713],[118.8721,27.735],[118.8611,27.7679],[118.8501,27.8119],[118.8281,27.8448],[118.8391,27.8668],[118.8171,27.9163],[118.8062,27.9163],[118.8062,27.9272],[118.7512,27.9437],[118.7292,27.9657],[118.7292,28.0096],[118.7292,28.0316],[118.7183,28.0481],[118.7183,28.0701],[118.7402,28.092],[118.7622,28.092],[118.7732,28.1085],[118.7842,28.1085],[118.8062,28.1195],[118.8062,28.158],[118.7952,28.1689],[118.7842,28.1744],[118.7622,28.1635],[118.7622,28.1689],[118.7732,28.1909],[118.8062,28.2074],[118.8171,28.2239],[118.7952,28.2404],[118.7512,28.2513],[118.7402,28.2788],[118.7292,28.2788],[118.7292,28.3008],[118.7183,28.3118],[118.6963,28.3118]];
        var polygon = new zrender.Polygon({
            shape: {
                points: points
            },
            style: {
                stroke: '#f00',
                fill: 'none'
            }
        });
        var min = points[0].slice();
        var max = points[0].slice();
        for (let i = 1; i < points.length; i++) {
            min[0] = Math.min(points[i][0], min[0]);
            min[1] = Math.min(points[i][1], min[1]);
            max[0] = Math.max(points[i][0], max[0]);
            max[1] = Math.max(points[i][1], max[1]);
        }
        var cx = (min[0] + max[0]) / 2;
        var cy = (min[1] + max[1]) / 2;
        var width = max[0] - min[0];
        var height = max[1] - min[1];
        var r = (width + height) / 4;

        var firstAngle = Math.atan2(points[0][1] - cy, points[0][0] - cx);
        if (firstAngle < 0) {
            firstAngle += Math.PI * 2;
        }
        var unitAngle = Math.PI * 2 / points.length;
        var circlePoints = points.map(function (pt, idx) {
            var angle = firstAngle + unitAngle * idx;
            return [Math.cos(angle) * r + cx, -Math.sin(angle) * r + cy];
        });

        polygon.scale = [
            400 / width,
            400 / width
        ];
        polygon.position = [
            200 - min[0] * polygon.scale[0],
            100 - min[1] * polygon.scale[1]
        ];
        polygon.style.lineWidth = 3 / polygon.scale[0];

        zr.add(polygon);

        setTimeout(function () {
            polygon.animateTo({
                shape: {
                    points: circlePoints
                }
            }, { duration: 1500, easing: 'elasticOut' });
        }, 1000);
    </script>
    <div id="main" style="width:1000px;height:600px;"></div>
</body>
</html>